<template>
  <div class="EchartPractice">
    <el-form
      :inline="true"
      :model="dataForm"
      @keyup.enter.native="setEchartOption()"
    >
      <el-form-item>
        <el-input
          v-model="dataForm.threshold"
          placeholder="阈值"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="dataForm.monitorParam"
          placeholder="参数"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="监测参数">
        <el-select v-model="dataForm.monitorParam" placeholder="请选择监测参数">
          <el-option label="温度" value="temperature"></el-option>
          <el-option label="湿度" value="humidity"></el-option>
          <el-option label="烟雾传感器" value="smokeSensor"></el-option>
          <el-option label="漏水监测仪" value="waterLeakage"></el-option>
          <el-option label="红外监测器" value="infraRed"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="setEchartOption()">查询</el-button>
      </el-form-item>
    </el-form>
    <div id="main"></div>
  </div>
</template>

<script>
// 如果是 webpack 打包，也可以 require 引入
import 'echarts/extension/bmap/bmap.js'


export default {
  name: "EchartPractice",
  data() {
    return {
      dataForm: {
        monitorParam: "",
        threshold: "",
      },
      datae: [],
      option: {
        title: {
          text: "机房监测系统——机器位置展示",
          subtext: "data from computer monitor",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: [126.639129, 45.750339],
          zoom: 12,
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3",
                },
              },
              {
                featureType: "railway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "highway",
                elementType: "all",
                stylers: {
                  color: "#fdfdfd",
                },
              },
              {
                featureType: "highway",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "arterial",
                elementType: "geometry.fill",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "poi",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "green",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "subway",
                elementType: "all",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999",
                },
              },
            ],
          },
        },
        series: [
          {
            name: "环境监测",
            type: "scatter",
            coordinateSystem: "bmap",
            data: [],
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2,
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
            },
          },
          {
            name: "Top 5",
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: [],
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              formatter: "{b}",
              position: "right",
              show: true,
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333",
            },
            emphasis: {
              scale: true,
            },
            zlevel: 1,
          },
        ],
      },
    };
  },
  methods: {
    drawChart() {
      let myEchart = this.$echarts.init(document.getElementById("main"));
      myEchart.setOption(this.option);
    },
    setEchartOption() {

      this.$http({
        url: this.$http.adornUrl("/monitormanage/machine/monitor/map"),
        method: "get",
        params: this.$http.adornParams({
          monitorParam: this.dataForm.monitorParam,
        }),
      }).then(({ data }) => {
        console.log("sss", data);
        // if (data && data.code === 0) {
        //   this.dataList = data.data;
        // } else {
        //   this.dataList = [];
        // }
        this.datae = [
        { name: "道里区", value: 79 },
        { name: "黑龙江大学", value: 77 },
        { name: "哈尔滨", value: 70},
        { name: "阿城区", value: 78},
        { name: "双城区", value: 78},
        { name: "松北区", value: 78},
      ];
      });


      let data = this.datae
      console.log("data is", data)
      let geoCoordMap = {
        哈尔滨: [126.63, 45.75], 
        黑龙江大学: [126.63, 45.71888],
        道里区: [126.61705, 45.75586],
        松北区: [126.56276, 45.80831],
        阿城区: [126.97525, 45.54144],
        双城区: [126.308784, 45.377942],
      };
      let res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
          });
        }
      }
      this.option.series[0]["data"] = res;

      this.drawChart();
    },
  },
  mounted() {
    this.drawChart();
   
  },
  created() {
     this.setEchartOption(); 
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 700px;
  margin: auto;
}
</style>

